<template>
  <Nav_bar :isLeftArrow="false" :title="'报警管理'" />
  <div class="alarm_box">
    <div class="body_box">
      <Select_down
        :select_down="true"
        :value="{ one: '设备编号', two: '报警类型' }"
        :option_list_1="option_list_1"
        :option_list_2="option_list_2"
        @leftSelectId="leftSelectId"
        @rightSelectId="rightSelectId"
      />
      <Table :headList="headList" :bodyList="bodyList" />

      <Pagination
        class="_Pagination"
        v-if="bodyList.length"
        v-model:page="pageParam.pageNum"
        :total="total"
        @pageChange="getMachineWarn"
      />
    </div>
  </div>
  <Tabbar />
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getMachineWarnApi } from '@/api/alarm/alarm'
import { getMachineListAllApi } from '@/api/machineData/machineData'
import { SwitchingTime } from '@/utils/tools'

const option_list_1 = ref([{ value: '全部', text: '全部' }])

const option_list_2 = [
  { value: '', text: '全部' },
  { value: 4, text: '库存报警' },
  { value: 3, text: '过期报警' },
  { value: 2, text: '温度报警' },
  { value: 1, text: '网络报警' },
]
const value1 = ref('')
const value2 = ref(option_list_2[0].value)
const headList = [
  { _title: '售货机编号', key: 'machineId' },
  { _title: '时间', key: '_date', style: 'font-size: 11px;' },
  { _title: '报警类型', key: 'alarm_type', additional: 'exceptionTemp' },
]
const bodyList = ref([])
const pageParam = ref({
  pageNum: 1,
  pageSize: 10,
})
const total = ref(0)
/** 获取设备报警list */
const getMachineWarn = async () => {
  try {
    const res = await getMachineWarnApi({
      machineId: value1.value,
      state: 0,
      status: value2.value,
      ...pageParam.value,
    })
    total.value = res.data.total
    bodyList.value = res.data?.rows?.map((item) => {
      return {
        id: item.warnTime,
        machineId: item.machineId,
        _date: SwitchingTime(Number(item.warnTime)),
        alarm_type: handList(item.errorType),
        exceptionTemp: item.exceptionTemp,
      }
    })
  } catch (error) {}
}
/**
 * 处理后端返回的list
 * @returns String
 */
const handList = (item) => {
  for (let i = 0; i < option_list_2.length; i++) {
    if (option_list_2[i].value === item) {
      return option_list_2[i].text
    }
  }
}

/**获取用户所有设备 */
const getMachineListAll = async () => {
  try {
    const res = await getMachineListAllApi()
    // console.log(res.data)
    const list = [{ value: '全部', text: '全部' }]
    res.data.forEach((item) => {
      const objItem = {
        value: item.machineId,
        text: item.machineName,
      }
      list.push(objItem)
    })
    option_list_1.value = list
  } catch (error) {}
}
/**点击 左侧 下拉框选中返回的数据 */
const leftSelectId = (item) => {
  // console.log(item.value)
  value1.value = item.value
  getMachineWarn()
}
/**点击 右侧 下拉框选中返回的数据 */
const rightSelectId = (item) => {
  // console.log(item.value)
  value2.value = item.value
  getMachineWarn()
}
onMounted(() => {
  getMachineWarn()
})
getMachineListAll()
</script>

<style lang="scss" scoped>
.alarm_box {
  width: 100%;
  min-height: calc(100% - 44px);
  padding: 7px 14px;
  background-color: var(--defaultBgc);
  .body_box {
    position: relative;
    max-width: 347px;
    box-sizing: border-box;
    padding: 0;
    padding-bottom: 102px;
    height: 80vh;
    background-color: #fff;
    ._Pagination {
      position: absolute;
      left: 10px;
      bottom: 10px;
    }
  }
}
.van-nav-bar {
  height: 44px;
  line-height: 44px;
  padding: 0 9px 0 5px;
  background-color: #5ed1ae;
  .van-nav-bar__content {
    height: 44px;
    line-height: 44px;
    .van-nav-bar__title {
      color: #fff !important;
      font-weight: 400;
      font-size: var(--fs18);
    }
  }
}
</style>
